<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#box1{
				width: 200px;
				height: 200px;
				background-color: yellowgreen;
			}
			
			#box2{
				width: 400px;
				height: 400px;
				background-color: yellow;
			}
			
			
		</style>
		<script type="text/javascript">
			
			window.onload = function() {
				
				/*
				 * 事件的冒泡（Bubble）
				 * 	- 冒泡指的是事件的向上传导，当后代元素上的事件被触发时，其祖先元素的相同事件也会被触发
				 * 	- 大部分情况下冒泡都是有用的, 如果想阻止事件冒泡可以事件对象来取消
				 * 
				 */
				
				var box1 = document.getElementById("box1");
				var box2 = document.getElementById("box2");

				box1.onclick = function(event) {
					event = event || window.event;
					alert("box1的响应函数");
					event.cancelBubble = true; // 取消冒泡
				};
				
			
				box2.onclick = function(event) {
					event = event || window.event;
					alert("box2的响应函数");
					event.cancelBubble = true; // 取消冒泡
				};
			
				document.body.onclick = function() {
					alert("body的响应函数");
				};
			};
			
		</script>
	</head>
	<body>
		
		<div id="box2">
			box2
			<div id=box1>box1</div>
		</div>
		
	</body>
</html>
